记录一下使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件。
一、使用 Vite 创建 Vue3+TS 项目 1.新建一个 temp 文件夹（1）在桌面新建一个 temp 文件夹，然后在 VS Code 中打开此文件夹，打开一个终端；
2.创建一个 Vue3 项目工程（1）具体操作如下：
npm create vite@latest(1) 输入项目名，如： vite-vue3-ts-less-element_plus ，然后回车? Project name: » vite-vue3-ts-less-element_plus(2) 选择 Vue 框架，回车? Select a framework: » - Use arrow-keys. Return to submit.Vanilla>VueReactPreactLitSvelteOthers(3) 选择数据类型，回车? Select a variant: » - Use arrow-keys. Return to submit.>TypeScriptJavaScriptCustomize with create-vue ↗Nuxt ↗(4) 创建完成，运行项目Done. Now run:cd vite-vue3-ts-less-element_plus npm install npm run devPS C:\Users\Administrator\Desktop\temp> 二、解决一下配置问题 1.修改配置文件（1）修改【vite.config.ts】文件
修改前：
import {defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()],})修改后：
import {defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import {resolve } from 'path'/** * 详情见 vitejs 文档：https://vitejs.dev/config/ */export default defineConfig({ plugins: [vue()], base: '/xxx/', // 配置相对地址或绝对地址，此处应为绝对地址，若将 Web 部署到 Nginx 所在的目录为 nginx-1.17.8/html/xxx ，则这个 base 的值就为 /xxx/ resolve: {alias: { '@': resolve(__dirname, './src'), assets: resolve(__dirname, './src/assets'),} }, server: {host: '', // 主机port: 5173, // 端口proxy: { // 项目 v1 的服务端接口地址 '/v1/api': {target: 'http://127.0.0.1:8091/',changeOrigin: true,secure: false,ws: true }, // 项目 v2 的服务端接口地址 '/v2/api': {target: 'http://127.0.0.1:8092/',changeOrigin: true,secure: false,ws: true }, // 项目 v3 的服务端接口地址 '/v3/api': {target: 'http://127.0.0.1:8093/',changeOrigin: true,secure: false,ws: true }, // // 默认服务端接口地址 // '/': { //target: 'http://127.0.0.1:8090/', //changeOrigin: true, //secure: false, //ws: false // }} }})（2）修改【tsconfig.json】文件
修改前：
{ "compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"module": "ESNext","lib": ["ES2020", "DOM", "DOM.Iterable"],"skipLibCheck": true,/* Bundler mode */"moduleResolution": "bundler","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "preserve",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "references": [{"path": "./tsconfig.node.json" }]}修改后：
{ "compilerOptions": {"allowJs": true, // xxx.vue is a JavaScript file. Did you mean to enable the 'allowJs' option?"target": "ES2020","useDefineForClassFields": true,"module": "ESNext","lib": ["ES2020", "DOM", "DOM.Iterable"],"skipLibCheck": true,/* Bundler mode */"moduleResolution": "Node","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "preserve",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "references": [{"path": "./tsconfig.node.json" }]}（3）修改【tsconfig.node.json】文件
修改前：
{ "compilerOptions": {"composite": true,"skipLibCheck": true,"module": "ESNext","moduleResolution": "bundler","allowSyntheticDefaultImports": true }, "include": ["vite.config.ts"]}修改后：
{ "compilerOptions": {"composite": true,"skipLibCheck": true,"module": "ESNext","moduleResolution": "bundler","allowSyntheticDefaultImports": true }, "include": ["vite.config.ts"]} 2.解决报错问题（1）找不到名称“__dirname”。
原因：path 模块是 node.js 的内置模块，而 node.js 默认不支持 ts 文件的
解决：安装 【@type/node】 依赖包【npm install @types/node --save-dev】
（2）未设置 "baseUrl" 时，不允许使用非相对路径。是否忘记了前导 "./"?。
解决：在【tsconfig.json】文件添加【baseUrl】配置
{ "compilerOptions": {..."baseUrl": ".",// 未设置 "baseUrl" 时，不允许使用非相对路径。"paths": { "@": ["src"], "@/*": ["src/*"]} }, ...}（3）找不到模块“./App.vue”或其相应的类型